<template>
	<view class="bg home">
		<u-navbar title="首页" leftIconSize="0" bgColor="transparent" :titleStyle="{'color':'#fff'}" :autoBack="true">
		</u-navbar>
		<view class="flex-row home-header">
			<view class="flex-sub flex-column align-center justify-center">
				<view class="">
					销售额
				</view>
				<view class="fw-700 sub-size mt-10">
					{{info.sales_price}}
				</view>
			</view>
			<view class="flex-sub flex-column align-center justify-center">
				<view class="">
					直推人数
				</view>
				<view class="fw-700 sub-size mt-10">
					{{info.team_num}}
				</view>
			</view>
			<view class="flex-sub flex-column align-center justify-center">
				<view class="">
					直推销售额
				</view>
				<view class="fw-700 sub-size mt-10">
					{{info.team_sales_price}}
				</view>
			</view>
		</view>
		<view class="p-30 home-box">
			<view class="card p-30 flex-row">
				<view class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						个人采购
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.purchase_num}}
					</view>
				</view>
				<view class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						个采总金额
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.purchase_price}}
					</view>
				</view>
				<view class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						团队采购
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.team_purchase_num}}
					</view>
				</view>
				<view class="flex-sub flex-column align-center justify-center">
					<view class="gray-color">
						团采总金额
					</view>
					<view class="fw-700 sub-size mt-10">
						{{info.team_purchase_price}}
					</view>
				</view>
			</view>
			<view class="mt-30">
				<view class="title">
					团队信息
				</view>
				<template v-if="!noData">
					<view class="card p-30 mt-30" v-for="(item,index) in list" :key="index">
						<view class="flex-row">
							<u-avatar size="60" :src="item.avatar"></u-avatar>
							<view class="flex-column justify-center w-full ml-30" style="gap: 10rpx;">
								<view class="flex-row align-center justify-between" style="gap: 10rpx;">
									<view class="fw-700">{{item.name}}</view>
									<view class="flex-row">
										<u-tag text="普通会员" size="mini" type="primary"></u-tag>
									</view>
								</view>
								<view class="small-size">{{item.mobile}}</view>
							</view>
						</view>
						<u-line color="#eee" margin="30rpx 0"></u-line>
						<view class="small-size flex-row">
							<view class="flex-sub flex-column align-center justify-between">
								<view class="">
									订单数量
								</view>
								<view class="fw-700">{{item.purchase_num}}</view>
							</view>
							<view class="flex-sub flex-column align-center justify-between">
								<view>
									总金额
								</view>
								<view class="fw-700">{{item.purchase_price}}</view>
							</view>
							<view class="flex-sub flex-column align-center justify-between">
								<view>
									人数
								</view>
								<view class="fw-700">{{item.team_num}}</view>
							</view>
						</view>
					</view>
					<u-loadmore marginTop="60rpx" :status="status" />
				</template>
				<template v-else>
					<u-empty marginTop="120rpx" mode="data">
					</u-empty>
				</template>
			</view>
		</view>

		<page-tabbar :value="0" />
	</view>
</template>

<script>
	import {
		index,
		teamList
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				info: {
					sales_price: 0,
					team_num: 0,
					team_sales_price: 0,
					purchase_num: 0,
					purchase_price: 0,
					team_purchase_num: 0,
					team_purchase_price: 0,
				},


				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0,
			}
		},
		computed: {
			...mapState([]),
		},
		onLoad() {
			if(this.isLogin) {
				this.initData()
			}else {
				this.noData = true
			}
		},
		methods: {
			initData() {
				index().then(res => {
					this.info = res
				})
				this.init();
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
				};
				teamList({
					params
				}).then(res => {
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = vm.page > Math.ceil(vm.total / vm.$u.config.limit) ? 'nomore' : "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}

				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		padding-bottom: 120rpx;

		&-header {
			height: 400rpx;
			color: #fff;
		}

		&-box {
			margin-top: -100rpx;
		}
	}
</style>